import React, { Component, PropTypes } from 'react'
import CompactInput from 'components/compact-input'
import { Select, Input } from 'antd'
import Chooser from 'components/chooser'
import Searcher from 'components/searcher'
import { messages, deepFullCopy } from "share/common"
import chooserData from 'share/chooserData'

const Option = Select.Option;

class AllocationLoanType extends Component {

  range = [{
    value: 'DEFAULT',
    text: messages('request-2.key7')/*系统默认值*/
  }, {
    value: 'CUSTOMIZE',
    text: messages('request-2.key8')/*自定义*/
  }, {
    value: 'ALL',
    text: messages('common.all.type')/*全部类型*/
  }, {
    value: 'PARTIAL',
    text: messages('request-2.key9')/*部分类型*/
  }];

  state = {
    range: 'ALL',
    value: []
  };

  componentMap = {
    Chooser,
    Searcher
  };

  handleChangeRange = range => {
    this.setState({ range, value: [] }, this.dispatchOnChange)
  };

  componentDidMount() {
    this.setValue(this.props.value);
  }

  componentWillReceiveProps(nextProps) {
    if('value' in nextProps) {
      this.setValue(nextProps.value)
    }
  }

  setValue = value => {
    if(value) {
      const { parser } = this.props;
      this.setState(parser(value));
    }
  };

  renderValueComponent = () => {
    const { range, value } = this.state;
    const { componentProps, component, setOfBooksId, disabled, fromType } = this.props;
    switch(range) {
      case 'DEFAULT':
      case 'ALL':
        return <Input disabled value={messages('request-2.key4')/*通用*/}/>;
      case 'CUSTOMIZE':
      case 'PARTIAL':
        let chooserItem = deepFullCopy(chooserData['available_loan_type']);
        const partialLoanTypeProps = Object.assign({}, {
          labelKey: 'description',
          valueKey: 'id',
          showNumber: true,
          selectorItem: chooserItem,
          listExtraParams: {
            isIncludeSys: false,
            setOfBooksId: fromType === 3 ? undefined : setOfBooksId
          }
        }, componentProps[range]);
        const PartialLoanTypeComp = this.componentMap[component[range]] || 'Chooser';
        return <PartialLoanTypeComp
          value={value}
          disabled={disabled}
          onChange={this.onChangeValue}
          {...partialLoanTypeProps}
        />;
      default:
        return <Input disabled value={messages('request-2.key4')/*通用*/}/>;
    }
  };

  onChangeValue = value => {
    this.setState({ value }, this.dispatchOnChange);
  };

  dispatchOnChange = () => {
    const { range, value } = this.state;
    const { onChange, formatter } = this.props;
    onChange && onChange(formatter({
      range, value
    }))
  };

  render() {
    const { hidden, disabled, value } = this.props;
    return (
      <div>
        <CompactInput>
          <Select
            disabled={disabled}
            style={{width: '100%'}}
            onChange={this.handleChangeRange}
            value={value && value.range}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {
              this.range
                .filter(item => hidden.indexOf(item.value) === -1)
                .map(option => <Option key={option.value}>{option.text}</Option>)
            }
          </Select>
          {this.renderValueComponent()}
        </CompactInput>
      </div>
    );
  }

  static propTypes = {
    onChange: PropTypes.func,
    hidden: PropTypes.array,
    component: PropTypes.object,
    componentProps: PropTypes.object,
    parser: PropTypes.func,
    formatter: PropTypes.func,
    disabled: PropTypes.bool,
    fromType: PropTypes.number
  };

  static defaultProps = {
    onChange: () => {},
    hidden: [],
    component: {
      'PARTIAL': 'Chooser',
      'CUSTOMIZE': 'Chooser'
    },
    componentProps: {
      'PARTIAL': {},
      'CUSTOMIZE': {}
    },
    parser: value => value,
    formatter: value => value,
    disabled: false,
    fromType: 2
  };
}

export default AllocationLoanType;
